//设置变量
@bg-color:#b7d4a8;

//清除默认样式
*{
    padding: 0;
    margin: 0;
    //改变盒子模型的计算方法
    box-sizing: border-box;
}
body{
    font:bold 20px "Courier"
}
//设置主窗口的样式
#main{
    width: 360px;
    height: 420px;
    //设置背景颜色
    background-color: @bg-color;
    //设置居中
    margin:100px auto;
    border:10px solid black;
    //设置圆角
    border-radius:20px;
    //开启弹性盒模式
    display: flex;
    //设置主轴方向，自上而下
    flex-flow: column;
    //设置主轴的对齐方向
    justify-content: space-around;
    //设置侧轴的对齐方式
    align-items: center;


    //游戏的舞台
    #stage{
        width:304px;
        height:304px;
        border: 2px solid black;
        //开启相对定位
        position: relative;
        //设置蛇的样式 注意这里设置的是snake里面的div的样式
        #snake{
            &>div{
            width: 10px;
            height: 10px;
            background-color: black;
            // margin-right: 2px;
            //这里为蛇的身体设置一个边框，目的是为了让蛇的每一段分开，
            //由于边框的背景颜色和舞台的背景颜色一样，所以我们看到的蛇是一段段的
            border: 1px solid @bg-color;
            //开启绝对定位,因为蛇的移动要有参照物
            position: absolute;
            }
            //蛇头是红色的，便于区分
            &>div:first-child{
                background-color: red;
            }

        }
       #food{
            width: 10px;
            height: 10px;
            //background-color: rgb(167, 37, 37);
            // border: 1px solid @bg-color;
            position: absolute;
            left: 40px;
            top:100px;
            display: flex;
            //设置横轴为主轴，warp表示自动换行
            flex-flow: row wrap;
            justify-content: space-between;
            align-content: space-between;
            
            &>div{
                width: 4px;
                height: 4px;
                background-color: rgb(167, 37, 37);
                //使四个div旋转45°
                transform: rotate(45deg);
            }

        }
    }
    //积分盘
    #score-panel{
    width: 300px;
    display: flex;
    //设置主轴的对齐方法
    flex-flow: row;
    justify-content: space-between;
    align-items: center;

    }
    

}